<template>
  <div class="login">
  <div class="login-center">
    <div class="login-add">
       <div class="login-title"></div>
       <img src="../assets/img/logo.png" alt="" class="login-logo">
       <h2 class="login-mes">管理系统--刘诗茵</h2>
     <el-form 
       :model="userInfo"
       ref="ruleForm" 
       class="login-form"
       :rules="userRules">
    <!-- 输入框 -->
    <el-form-item prop="username">
    <el-input 
    v-model="userInfo.username"
    class="login-ipt"
    >
    <i slot="prefix" class="el-icon-user-solid"></i>
    </el-input>
     </el-form-item>
<!-- 密码框 -->
       <el-form-item  prop="password">
    <el-input 
    v-model="userInfo.password"
    class="login-ipt"
    type="password"
    show-password
    >
    <i slot="prefix" class="el-icon-unlock"></i>
    <!-- <i slot="suffix" class="el-icon-check"></i> -->
    </el-input>
     </el-form-item>
<!-- 登录/重置 -->
     <el-form-item>
    <el-button type="primary" @click="submitForm" class="login-submit">登录</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
    </el-form>
    </div>
  </div>
  </div>
</template>

<script>
import {login} from '../api'
export default {
 name:"Login",
 data(){
    return{
        userInfo:{
            username:"",
            password:""
        },
        userRules:{
            username:[{required:true,message:'请输入用户名', trigger: 'blur'}],
            password:[{required:true,message:'请输入密码', trigger: 'blur'}]
        }
    }
 },
 methods:{
    submitForm(){
     this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            // alert('submit!');//验证成功
            // 向后台验证用户的账号
            login(this.userInfo).then(res=>{console.log(res);})
          } else {
            console.log('error submit!!');//验证失败
            this.$message.error('请输入完整的用户名和密码');
            return false;
          }
     })
    },
    resetForm(){
      this.userInfo.username=""
       this.userInfo.password=""
    }
 }
}
</script>

<style scoped lang="less">
.login{
width: 100vw;
height: 100vh;
position: relative;

   .login-center{
    width: 100%;
    height: 300px;
    position: absolute;
    top: 50%;
    margin-top: -150px;
    background-color: #409eff;
    background-image: url(../assets/img/bg.png);
    background-repeat: round;
    background-size: cover;
   .login-add{
    width: 400px;
    height: 460px;
    background: #fff;
    // border: 1px solid #ccc;
    box-shadow: -2px 3px 1px #eee;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    margin-top: -80px;
    border-radius: 4px;
    overflow: hidden;
   
   }
 .login-title{
    width: 100%;
    height: 10px;
    background: #409eff;
 }
 .login-logo{
    margin: 20px 0px 0px 130px;
 }
 .login-mes{
    text-align: center;
    color: #409eff;
 }
.login-form{
     margin: 15px 50px 0px;
    .login-ipt{
      width: 300px;
     
      i{
        color: #409eff;
      }
    }
    .login-submit{
        margin-left: 70px;

    }
   }
 } 
}

</style>